<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="~assets/img/face.png">
        <span>数易研 · 数据分析系统</span>
      </div>

      <el-menu mode="horizontal" style="margin-left: 30px"
                router>
        <el-menu-item index="/datasource">云数据源</el-menu-item>
        <el-menu-item index="/devcenter">开发中心</el-menu-item>
        <el-menu-item index="/repository">资源库</el-menu-item>
        <el-menu-item index="/system">系统设置</el-menu-item>
      </el-menu>

      <el-button type="info" @click="logout" class="logoutBtn">退出</el-button>
    </el-header>
    <el-container>
      <el-aside class="sourceSide">
        <resource-tree/>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  import ResourceTree from "views/restree/ResourceTree";
	export default {
    name: "Home",
		components: {ResourceTree},
		data() {
      return {
				activeName: 'first'
      }
    },
    methods: {
      logout() {
        // window.sessionStorage.removeItem("token");
        this.$router.push("/login");
      },

    },
    created() {

    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }

  .sourceSide {
    width: 200px;
  }

  .el-header {
    display: flex;
    padding-left: 16px;
    align-items: center;
    border-bottom: 1px #E6E6E6 solid;
    color: #ffffff;
    font-size: 20px;
    height: 50px;
    > div {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }
  }

  .el-footer {
    background-color: #4A5064;
  }

  .el-aside {
    border-right: 1px #E6E6E6 solid;
    background-color: #fff;
    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #fff;
    padding: 10px;
  }

  .iconfont {
    margin-right: 10px;
  }

  .logoutBtn{
    position: absolute;
    right: 20px;
  }



</style>
